<template>
  <div>
    <el-cascader
      v-if="panel"
      v-model="disValue"
      :options="optionList"
      :props="props"
      :collapse-tags="collapseTags"
      clearable
      :style="{width: width + 'px'}"
      :filterable="true"
      :show-all-levels="showAllLevels"
      @change="handleChange"
    />
  </div>
</template>

<script>

export default {
  name: 'DistrictPicker',
  props: {
    value: {
      type: [String, Array, Number],
      default: ''
    },
    width: {
      type: Number,
      default: 280
    },
    multiple: {
      type: Boolean,
      default: false
    },
    checkStrictly: {
      type: Boolean,
      default: false
    },
    panel: {
      type: Boolean,
      default: true
    },
    collapseTags: {
      type: Boolean,
      default: true
    },
    showAllLevels: {
      type: Boolean,
      default: true
    },
    optionList: {
      type: Array,
      default: () => []
    }

  },
  data() {
    return {
      props: {
        multiple: this.multiple,
        collapseTags: false,
        checkStrictly: this.checkStrictly
      }
    }
  },
  computed: {
    disValue: {
      get() {
        return this.value
      },
      set(val) {
        console.log(val, 'changes')
      }
    }
  },
  created() {
  },
  methods: {
    // handleNode(val) {
    //   if (val.length === 1) {
    //     this.getCities(val[0])
    //   }
    //   if (val.length === 2) {
    //     this.getCounties(val[0], val[1])
    //   }
    // },
    handleChange(val) {
      console.log(val, 'change')
      // this.$emit('change', val)
      // console.log(this.province)
    }
  }
}
</script>

<style scoped>

</style>
